<template>
  <div class="container">
    <div class="title">Home Page</div>
    <button @click="clickModal">测试莫太框组件</button>
    <button @click="clickToast">测试消息提示</button>
    <button @click="clickPhpApi">测试PHP接口</button>
    <button @click="clickNodeApi">测试Node接口</button>
    <button @click="clickAuth">判断登录</button>
    <button @click="clearAuth">清除用户登录信息</button>
  </div>
</template>

<script>
import TestModal from '@/components/common/test.vue'
import { apiMixin } from '@/mixins/apiMixin.js'
import userAuth from '@/service/userAuth'
export default {
  data() {
    return {}
  },
  mixins: [apiMixin],
  methods: {
    //点击弹出莫太框组件
    clickModal() {
      this.$modal({
        template: TestModal
      })
    },
    //点击弹出消息提示
    clickToast() {
      this.$toast('你好')
    },
    //点击调用PhP接口
    clickPhpApi() {
      this.getDemoPHPApi().then(data => {
        this.$toast('PHP 调用成功')
      })
    },
    //点击调用Node接口
    clickNodeApi() {
      this.getDemoNodeApi({
        page: 1,
        limit: 20,
        category: '582d51c8d295847047d81759',
        AppVersion: '3.9'
      }).then(data => {
        this.$toast('Node 调用成功')
      })
    },
    //点击判断登录信息
    clickAuth() {
      if (!userAuth.isLogin()) {
        this.$showLoginPoper()
          .then(results => {
            console.log(results)
            if (results === 'close') return
            userAuth.setUserId(
              results.auth && results.auth.UserId,
              results.auth && results.auth.Uid
            )
          })
          .catch(error => {
            console.log(error)
          })
      } else {
        this.$toast({
          message: '该用户已登录',
          duration: 1000
        })
      }
    },
    //清除用户登录信息
    clearAuth() {
      userAuth.clearAuth()
      this.$toast('清楚成功')
    }
  },
  created() {}
}
</script>

<style lang="scss" scoped>
.container {
  text-align: center;
}

.title {
  font-size: 0.36rem;
  text-align: center;
  margin-top: 1rem;
}

button {
  padding: 0.06rem 0.2rem;
  margin: 0.2rem;
  border-radius: 0.04rem;
  outline: none;
  border: 0;
  background: #ccc;
}
</style>
